I somehow still have an issue with that. Whenever screen orientation is being changed, the active index is wrong. Here is a live example (I've added some debug on slideChange and resize): https://www.mosam-arts.com/en/portfolio/snapshots/

This is when it's happening:

1. Start with portrait (both swipers are in viewport)
2. Swipe a couple of times (both swipers stay in sync regarding active index)
3. Now switch to landscape (notice the active index jump!), logical side effect: lazy images of the sudden new index are not loaded, coz why should they ;)
4. Swipe any direction on the top swiper
5. Change orientation again (another active index jump occurs)

Using debug I can see, that before actual on: resize event occurs, the active slide is miscalculated and the miscalculation is being spread across both afterwards:

-- swiped to slide 10 --
SLIDE_CHANGE! Thumbs slider index: 10
SLIDE_CHANGE! Main slider index: 10
-- rotated screen --
SLIDE_CHANGE! Thumbs slider index: 5 <-- y tho?
RESIZE! Main slider index: 10
SLIDE_CHANGE! Main slider index: 5
RESIZE! Thumbs slider index: 5

Initialization (had to uglify):

albumGalleryTop = new Swiper('.album-gallery-top', { preloadImages: false, lazy: { loadPrevNext: true, preloaderClass: 'tri-preloader' }, autoHeight: true, hashNavigation: { watchState: true }, keyboard: { enabled: true, }, navigation: { nextEl: '.album-gallery-arrow-next', prevEl: '.album-gallery-arrow-prev', }, speed: animation_duration, on: { resize: function() { console.log('RESIZE! Main slider index: ' + this.activeIndex); }, slideChange: function() { console.log('SLIDE_CHANGE! Main slider index: ' + this.activeIndex); } } }); albumGalleryThumbs = new Swiper('.album-gallery-thumbs', { hashNavigation: { watchState: true }, speed: animation_duration, centeredSlides: true, touchRatio: 0.2, slideToClickedSlide: true, slideClass: 'swiper-slide-preview', slideActiveClass: 'swiper-slide-preview-active', slidesPerView: 'auto', on: { resize: function() { console.log('RESIZE! Thumbs slider index: ' + this.activeIndex); }, slideChange: function() { console.log('SLIDE_CHANGE! Thumbs slider index: ' + this.activeIndex); albumGalleryTop.updateAutoHeight(animation_duration); } } }); albumGalleryTop.controller.control = albumGalleryThumbs; albumGalleryThumbs.controller.control = albumGalleryTop;